<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="ipt">
    <script>
        //防抖是触发事件后n秒再执行该事件，若在n秒内被重复触发，则重新计时
            const ipt = document.getElementById("ipt")

            function center (e){
                console.log(this)
                console.log("😀😀😀😀")
                console.log(e)  
            }
            ipt.onkeyup = debounce(center,2000)
            function debounce(fn,time){
                let timer =null
                return function(e){
                clearTimeout(timer)//所以在进到事件函数中一开始要把上一次的计数器清掉，重新计时，清掉之后，里面的函数就不会执行，所以等最后一次输入完成时就只执行了一次核心代码
                  timer = setTimeout(()=>{
                        fn.call(this,e)
                    },time)
                }
            
            }



    </script>
</body>
</html>